<template>
    <div class="shoppingList">
       <v-header title="商品清单" ref="header"></v-header>
        <scroll ref="scroll" style="overflow: hidden;height: 100%"
            :style="{height: scrollHeight + 'px'}">
            <div>
                <div class="shoppingAll" v-for="item in shoppingList" :key="item.id" @click="handleSpecialDesc(item.goodsId)">
                    <div class="shoppingImage">
                        <img :src="item.thumbUrl" alt="" class="imgWrapper">
                    </div>
                    <div class="shoppingDesc">
                        <div class="shoopingTitle">
                            <p>{{item.goodsName}}</p>
                        </div>
                        <div class="shoppingDetali">
                            <p>
                              {{item.goodsIntro}}
                            </p>
                        </div>
                        <div class="shoopingMoney">
                            <p class="shoopingPrice">
                                ¥ {{item.normalPrice}}
                            </p>
                            <p class="shoppingTime">
                                {{item.updateAt.substring(0,10)}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import axios from '@/api/axiosApi'
import Scroll from '@/components/scroll/scroll'
import { localUser } from '@/assets/js/local'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      scrollHeight: '500'
    }
  },
  computed: {
    ...mapGetters([
      'shoppingList'
    ])
  },
  mounted () {
    this.scrollHeight = window.innerHeight - this.$refs.header.$el.offsetHeight
  },
  created () {
  },
  methods: {
    handleSpecialDesc (goodsId) {
      this.$router.push('/specialLocalProductDetail/' + goodsId)
    }
  },
  components: {
    VHeader,
    axios,
    localUser,
    Scroll
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.shoppingList {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.shoppingAll {
    display flex
    padding-top 15px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    background-color white
    border-bottom-style solid
    border-width:1px
    border-color: #E4E4E4
    .shoppingImage {
         width 120px
        .imgWrapper {
            width 85px
            height 81px
            background-size: cover
            background-repeat: no-repeat
        }
    }
    .shoppingDesc {
        width 92%
        .shoopingTitle {
            p {
                font-weight bold
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
        }
        .shoppingDetali {
          margin-top 3px
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
        .shoopingMoney {
            margin-top 5px
            display flex
            justify-content space-between
            .shoopingPrice {
                color red
            }
            .shoppingTime {
                color $color-text-2
                font-size $font-size-desc
                margin-top 3px
            }
        }
    }
}

</style>

